<%--
  Created by IntelliJ IDEA.
  User: lxm
  Date: 2018/5/5
  Time: 下午3:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <jsp:include page="/static/common/stylesheets.jsp"></jsp:include>
    <link href="/static/layui/css/doc.css" rel="stylesheet">
    <title>词云</title>
    <style>
        p {
            font-size: 16px;
            line-height: 2;
        }

        .icon {
            position: relative;
            font-size: 15px;
            height: 32px;
            display: block;
            fill: rgba(51, 51, 51, 0.5);
            margin-right: 20px;
            -webkit-transition: all .2s ease-out;
            transition: all .2s ease-out;
        }

        .icon.active {
            fill: #E74C3C;
        }

        .icon.big {
            width: 64px;
            height: 64px;
            fill: rgba(51, 51, 51, 0.5);
        }

        #wrapper {
            min-height: 700px;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            background-color: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: left;
            -webkit-justify-content: left;
            -ms-flex-pack: left;
            justify-content: left;

        }

        #left-side {
            height: 70%;
            width: 15%;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
        }

        #left-side ul li {
            padding-top: 10px;
            padding-bottom: 10px;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            line-height: 34px;
            color: rgba(51, 51, 51, 0.5);
            font-weight: 500;
            cursor: pointer;
            -webkit-transition: all .2s ease-out;
            transition: all .2s ease-out;
        }

        #left-side ul li:hover {
            color: #333333;
            -webkit-transition: all .2s ease-out;
            transition: all .2s ease-out;
        }

        #left-side ul li:hover > .icon {
            fill: #333;
        }

        #left-side ul li.active {
            color: #333333;
        }

        #left-side ul li.active:hover > .icon {
            fill: #E74C3C;
        }

        #border {
            height: 600px;
            width: 1px;
            background-color: rgba(51, 51, 51, 0.2);
        }

        #border #line {
            width: 5px;
            height: 54px;
            background-color: #E74C3C;
            margin-left: -2px;
            margin-top: 7px;
            -webkit-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
        }

        #right-side {
            /*height: 300px;*/
            min-height: 650px;
            width: 85%;
            /*overflow: hidden;*/
        }

        #right-side #first, #right-side #second, #right-side #third, #right-side #fourth {
            position: absolute;
            height: 300px;
            width: 75%;
            -webkit-transition: all .6s ease-in-out;
            transition: all .6s ease-in-out;
            margin-top: -350px;
            opacity: 0;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
        }

        #right-side #first.active, #right-side #second.active, #right-side #third.active, #right-side #fourth.active {
            margin-top: 0px;
            opacity: 1;
            -webkit-transition: all .6s ease-in-out;
            transition: all .6s ease-in-out;
        }

        .tab-active {
            color: #333333;
            margin-top: 0px;
            opacity: 1;
            -webkit-transition: all .6s ease-in-out;
            transition: all .6s ease-in-out;
        }

        .tab-content-active {
            margin-top: 0px;
            opacity: 1;
            -webkit-transition: all .6s ease-in-out;
            transition: all .6s ease-in-out;
        }
    </style>

</head>
<body>
<jsp:include page="/static/common/header.jsp"></jsp:include>

<div class="layui-main site-inline">
    <jsp:include page="/static/common/docs.jsp"></jsp:include>

    <div class="site-content">
        <h1 class="site-h1">简介 - 词云</h1>
        <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;词云将词语按照一定顺序和规律进行排列，如按照频度递减或者字母顺序排列，并以文字的大小代表词语重要性[5]，也被称为文字云。在语篇分析中，用户可能关注的是一长串文本中出现频率较高的“关键字”，而词云则是对这些“关键字”赋予视觉化的展示。大部分的低频、低质的词汇会被词云所过滤，这样一来，用户可以非常清晰地看到一段文本的高频词汇。本模块需预一部分词云蒙版，也需提供给用户自行上传蒙版的权利。 </p>
        <fieldset class="layui-elem-field layui-field-title site-title">
            <legend><a name="compatibility">词云接口</a></legend>
        </fieldset>
        <pre class="md-fences md-end-block" lang="powershell"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 30px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-error">请求方法</span><span class="cm-operator">:</span><span class="cm-identifier">POST</span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-error">请求</span><span class="cm-identifier">URL</span><span class="cm-operator">:</span> <span class="cm-identifier">http</span><span class="cm-operator">://</span><span class="cm-identifier">host</span><span class="cm-operator">:</span><span class="cm-identifier">port</span><span class="cm-operator">/</span><span class="cm-identifier">api</span><span class="cm-operator">/</span><span class="cm-identifier">discourse</span><span class="cm-operator">/</span><span class="cm-identifier">wordcloud</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-error">请求类型</span><span class="cm-operator">:</span> <span class="cm-identifier">application</span><span class="cm-operator">/</span><span class="cm-identifier">json</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-error">请求</span><span class="cm-identifier">Body</span><span class="cm-operator">:</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-punctuation">{</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-string">"type"</span><span class="cm-operator">:</span><span class="cm-string">"RECTANGLE"</span><span class="cm-punctuation">,</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-string">"width"</span><span class="cm-operator">:</span><span class="cm-string">"600"</span><span class="cm-punctuation">,</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-string">"height"</span><span class="cm-operator">:</span><span class="cm-string">"600"</span><span class="cm-punctuation">,</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-string">"color"</span><span class="cm-operator">:</span><span class="cm-string">"#ffffff"</span><span class="cm-punctuation">,</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-string">"font"</span><span class="cm-operator">:</span><span class="cm-string">"STHeiti Light"</span><span class="cm-punctuation">,</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-string">"text"</span><span class="cm-operator">:</span><span class="cm-string">"我爱祖国"</span><span class="cm-punctuation">,</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-string">"imagePath"</span><span class="cm-operator">:</span><span class="cm-string">"data:,"</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-punctuation">}</span></span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color: transparent; top: 286px;"></div><div class="CodeMirror-gutters" style="display: none; height: 316px;"></div></div></div></pre>
        <fieldset class="layui-elem-field layui-field-title site-title">
            <legend><a name="compatibility">接口字段说明</a></legend>
        </fieldset>
        <figure><table><thead><tr><th style="text-align:center;">字段名</th><th style="text-align:center;">字段类型</th><th style="text-align:center;">说明</th><th style="text-align:center;">是否必须</th><th style="text-align:center;">默认值</th></tr></thead><tbody><tr><td style="text-align:center;">type</td><td style="text-align:center;">string</td><td style="text-align:center;">词云的类型，详见下面的type字段枚举</td><td style="text-align:center;">是</td><td style="text-align:center;">RECTANGLE</td></tr><tr><td style="text-align:center;">width</td><td style="text-align:center;">string</td><td style="text-align:center;">词云图片的宽度</td><td style="text-align:center;">否</td><td style="text-align:center;">930</td></tr><tr><td style="text-align:center;">height</td><td style="text-align:center;">string</td><td style="text-align:center;">词云图片的高度</td><td style="text-align:center;">否</td><td style="text-align:center;">600</td></tr><tr><td style="text-align:center;">color</td><td style="text-align:center;">string</td><td style="text-align:center;">词云图片的背景颜色</td><td style="text-align:center;">否</td><td style="text-align:center;">#ffffff</td></tr><tr><td style="text-align:center;">font</td><td style="text-align:center;">string</td><td style="text-align:center;">词云图片所选用的字体</td><td style="text-align:center;">否</td><td style="text-align:center;">STHeiti Light</td></tr><tr><td style="text-align:center;">text</td><td style="text-align:center;">string</td><td style="text-align:center;">要绘制词云图片的文本</td><td style="text-align:center;">是</td><td style="text-align:center;">&nbsp;</td></tr><tr><td style="text-align:center;">imagePath</td><td style="text-align:center;">string</td><td style="text-align:center;">词云图片的背景</td><td style="text-align:center;">否</td><td style="text-align:center;">空</td></tr></tbody></table></figure>
        <fieldset class="layui-elem-field layui-field-title site-title">
            <legend><a name="compatibility">接口返回示例</a></legend>
        </fieldset>
        <pre class="md-fences md-end-block" lang="json"> <div class="CodeMirror cm-s-inner CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 4px;"></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 30px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">{</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-string cm-property">"status"</span>:<span class="cm-number">0</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-string cm-property">"msg"</span>:<span class="cm-string">"请求成功"</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-string cm-property">"data"</span>:{</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string cm-property">"fileName"</span>:<span class="cm-string">"BA939D5A31BE7109E9272754B6B2A4AF.png"</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string cm-property">"describe"</span>:<span class="cm-string">"RECTANGLE"</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string cm-property">"type"</span>:<span class="cm-string">"RECTANGLE"</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string cm-property">"src"</span>:<span class="cm-string">"/downloadFiles/cloud/201805/BA939D5A31BE7109E9272754B6B2A4AF.png"</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp;  }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color: transparent; top: 220px;"></div><div class="CodeMirror-gutters" style="display: none; height: 250px;"></div></div></div></pre>
        <fieldset class="layui-elem-field layui-field-title site-title">
            <legend><a name="compatibility">返回字段说明</a></legend>
        </fieldset>
        <figure><table><thead><tr><th style="text-align:center;">字段名</th><th style="text-align:center;">参数类型</th><th style="text-align:center;">说明</th></tr></thead><tbody><tr><td style="text-align:center;">status</td><td style="text-align:center;">int</td><td style="text-align:center;">状态码</td></tr><tr><td style="text-align:center;">msg</td><td style="text-align:center;">string</td><td style="text-align:center;">状态说明</td></tr><tr><td style="text-align:center;">data</td><td style="text-align:center;">object</td><td style="text-align:center;">返回的数据对象</td></tr><tr><td style="text-align:center;">fileName</td><td style="text-align:center;">string</td><td style="text-align:center;">词云文件名</td></tr><tr><td style="text-align:center;">describe</td><td style="text-align:center;">string</td><td style="text-align:center;">词云描述</td></tr><tr><td style="text-align:center;">type</td><td style="text-align:center;">string</td><td style="text-align:center;">词云类型</td></tr><tr><td style="text-align:center;">src</td><td style="text-align:center;">string</td><td style="text-align:center;">词云的下载地址</td></tr></tbody></table></figure>

        <fieldset class="layui-elem-field layui-field-title site-title">
            <legend><a name="compatibility">可选字体</a></legend>
        </fieldset>

        <figure><table><thead><tr><th style="text-align:center;">字体名称</th><th style="text-align:center;">说明</th></tr></thead><tbody><tr><td style="text-align:center;">STHeiti Light</td><td style="text-align:center;">黑体</td></tr><tr><td style="text-align:center;">华文黑体</td><td style="text-align:center;">&nbsp;</td></tr><tr><td style="text-align:center;">楷体</td><td style="text-align:center;">&nbsp;</td></tr></tbody></table></figure>

        <fieldset class="layui-elem-field layui-field-title site-title">
            <legend><a name="compatibility">可选背景颜色</a></legend>
        </fieldset>
        <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            用户可以设置任意RGB颜色。格式为：#ffffff这样的十六进制表示的RGB颜色。
        </p>
        <fieldset class="layui-elem-field layui-field-title site-title">
            <legend><a name="compatibility">可选图片蒙版</a></legend>
        </fieldset>
        <figure><table><thead><tr><th style="text-align:center;">蒙版名称</th><th style="text-align:center;">说明</th></tr></thead><tbody><tr><td style="text-align:center;">CAT</td><td style="text-align:center;">猫的图片</td></tr><tr><td style="text-align:center;">WHALE</td><td style="text-align:center;">鲸鱼</td></tr><tr><td style="text-align:center;">EARTH</td><td style="text-align:center;">地球</td></tr><tr><td style="text-align:center;">DRAGON</td><td style="text-align:center;">龙</td></tr><tr><td style="text-align:center;">LOGO</td><td style="text-align:center;">Logo</td></tr><tr><td style="text-align:center;">WECHAT</td><td style="text-align:center;">微信气泡</td></tr><tr><td style="text-align:center;">CLOUD</td><td style="text-align:center;">云</td></tr><tr><td style="text-align:center;">CLOUD_BG</td><td style="text-align:center;">云作为背景被环绕</td></tr><tr><td style="text-align:center;">UNDEFINED</td><td style="text-align:center;">不定义，使用自己的图为蒙版</td></tr></tbody></table></figure>
        <fieldset class="layui-elem-field layui-field-title site-title">
            <legend><a name="compatibility">下载说明</a></legend>
        </fieldset>
        <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            1、文件处理完毕后会在前端弹窗显示分词的结果，用户可以拖动到窗口最下端，就能看见"文件下载"的按钮，点击下载之后就能下载文件。<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            2、在文件API接口的Response中有一个download的URL路径，用户可以通过访问该路径即可获取到完成分词后的文件。
        </p>

        <div class="layui-elem-quote">
            <p>自然语言处理与可视化平台 - 林晓民</p>
        </div>

    </div>

        <jsp:include page="../nav.jsp"></jsp:include>

    <jsp:include page="/static/common/footer.jsp"></jsp:include>
    <jsp:include page="/static/common/scripts.jsp"></jsp:include>
    <script src="/static/layui/js/doc/doc.js"></script>
</body>
</html>
